<template>
  <div style="margin-left: 550px">
    <form>
      <table ng="0" cellpadding="10" style="width: 500px">
        <tr>
          <th>头像：</th>
          <td class="img">
            <div style="float: left;margin-top: 20px">
              <el-upload
                class="avatar-uploader"
                :action= action
                :headers="myHeaders"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                style="float: left"
              >
                <img v-if="this.$store.state.teacher.image" :src="this.$store.state.teacher.image" class="avatar" alt=""/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div style="font-size: 12px;float:left;margin-left: 10px; width:80px;margin-top: 60px">点击头像添加或更换头像</div>
          </td>
        </tr>
<!--        <tr>
          <td>头像：</td>
          <td><img :src=this.$store.state.teacher.image style="border-radius: 50%;
                                                                width: 100px;
                                                                height: 100px;
                                                                object-fit: cover;
                                                                object-position: center;
                                                                vertical-align: middle;
                                                                margin-left: 120px;
                                                                margin-top: 25px;
                                                                float: left;"></td>
        </tr>
        <tr>
          <td>修改头像：</td>
          <td><el-upload
            class="upload-demo"
            action='http://localhost:8080/teacher/updateImage'
            :file-list="fileList"
            :headers="headers1"
            list-type="picture"
            :on-success="handleAvatarSuccess">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload></td>
        </tr>-->
        <tr>
          <td>账号：</td>
          <td><el-input v-model="user.account" placeholder="请输入内容" :disabled="true"></el-input></td>
        </tr>
        <tr>
          <td>昵称：</td>
          <td><el-input v-model="teacher.nickname" placeholder="请输入内容"></el-input></td>
        </tr>
        <tr>
          <td>手机号：</td>
          <td><el-input v-model="user.phone" placeholder="请输入内容" ></el-input></td>
        </tr>
        <tr>
          <td>邮箱：</td>
          <td><el-input v-model="user.email" placeholder="请输入内容" ></el-input></td>
        </tr>
        <tr>
          <td>性别：</td>
          <td>
            <input type="radio" name="性别" value="男" v-model="teacher.gender">男
            <input type="radio" name="性别" value="女" v-model="teacher.gender">女
            <input type="radio" name="性别" value="保密" v-model="teacher.gender">保密
          </td>
        </tr>
        <tr>
          <td>出生日期：</td>
          <td><div class="block">
            <el-date-picker
              v-model="teacher.birthday"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div></td>
        </tr>
        <tr>
          <td>学校：</td>
          <td><el-input v-model="teacher.school" placeholder="请输入内容" ></el-input></td>
        </tr>
        <tr>
          <td>个人简介：</td>
          <td><el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="teacher.intro">
          </el-input></td>
        </tr>
      </table>
    </form>
    <el-button type="success" plain @click="updateinfo()">保存修改</el-button><br>
  </div>
</template>

<script>
import router from "../../router";

export default {
  inject:['reload'],  //注入依赖

  data(){
    return{
      teacher: {},
      user: {},
      fileList: [],
      imageUrl: "",
      myHeaders: {authorization: sessionStorage.getItem("token")},
      action: 'http://localhost:8080/teacher/updateImage'
    }
  },
  created(){
    //发送请求获取数据
    this.axios.get(this.baseUrl+"teacher/findById")
      .then(res =>{
        //res.data   ResponseResult
        console.log(res.data.data);
        //
        this.teacher = res.data.data;

      });
    this.axios.get(this.baseUrl+"user/all")
      .then(res =>{
        console.log(res.data.data);
        //
        this.user = res.data.data;

      });
  },

  methods:{
    updateinfo:function () {
      this.axios.post(this.baseUrl+"teacher/updateinfo",this.teacher)
        .then(res =>{

        })
    },
    handleAvatarSuccess(res, file) {
      this.reload();
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png" || "image/jpg" || "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG/JPEG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader :hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #6b6b6b;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #fff;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
  object-position: center;
}
.avatar {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
}

 .el-header {
   background-color: #B3C0D1;
   color: #333;
   line-height: 60px;
 }

.el-aside {
  color: #333;
}

</style>
